<template>

  <div class="search-page">
        <homeHeader/>

    <searchHeader :bg="false" isHome="true" />
    <div class="page-position">
      <div class="item-content">当前位置：首页>服装</div>
    </div>
    <div class="search-potions item-content">
      <el-form ref="form" :model="formData" label-width="90px">
        <el-form-item label="搜索条件:" class="serach-item">
           <el-radio-group v-model="formData.isAll">
            <el-radio label="0">标题</el-radio>
            <el-radio label="1">全文</el-radio>
            <el-radio label="2">精准</el-radio>
            <el-radio label="3">模糊</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="搜索类型:" class="serach-item">
          <el-checkbox-group v-model="formData.channelId">
            <el-checkbox
              v-for="item in aticles"
              :key="item.channelId"
              :label="item.channelId"
              >{{ item.channelName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="时间:" class="serach-item">
          <el-radio-group v-model="formData.isAll">
            <el-radio label="0">全部</el-radio>
            <el-radio label="1">当天</el-radio>
            <el-radio label="2">最近一周</el-radio>
            <el-radio label="3">最近一个月</el-radio>
            <el-radio label="4">三个月内</el-radio>
            <el-radio label="5">半年内</el-radio>
            <el-radio label="6">一年内</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="地区:" class="serach-item">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0"></div>

          <el-checkbox-group v-model="formData.regionId" @change="handleCheckedRegionChange">
            <el-row v-for="region in regions" :key="region.id" >
                <!-- <el-checkbox-group v-model="formData.regionId" @change="handleCheckedCitiesChange"> -->
              <el-row type="flex" justify="start">
                <el-col :span="2">
                  <el-checkbox class="region-first" :label="region.id">{{ region.name }}</el-checkbox>
                  <span class="region-line h4">|</span>
                </el-col>
                <el-col :span="2" v-for="item in region.regionAreaList" :key="region.id + '-' + item.areaId">
                  <el-checkbox :label="item.areaId">{{ item.areaName }}</el-checkbox>
                  <i @click="handleSelectArea(region.id, item)" class="h4 el-collapse-item__arrow el-icon-arrow-right" :class="{'is-active': isAreaActive == item.areaId}"></i>
                </el-col>
              </el-row>
                <!-- </el-checkbox-group> -->

              <el-row type="flex" justify="center" class="el-collapse-item__wrap h4" v-show="selectRegion == region.id">
                <el-checkbox-group class="fill-width" v-model="formData.cityId" @change="handleCheckedCitiesChange">
                  <el-col :span="2" v-for="city in citys" :key="city.id">
                    <el-checkbox :label="city.id">{{city.name}}</el-checkbox>
                  </el-col>
                </el-checkbox-group>
              </el-row>
            </el-row>
            
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="已选：" class="serach-item">
          <el-row type="flex" justify="space-between" >
            <el-col :span="12"><span>上海</span><span>深圳</span></el-col>
            <el-col :span="3">
              <el-button @click="searchArticle" size="mini"  type="primary">搜索</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>

    <el-container class="item-content">
      <!-- <el-header> </el-header> -->
      <el-container class="mt-2">
        <el-main>
            <el-table :data="articleList" stripe style="width: 100%" border>
                <el-table-column type="selection" width="55" ></el-table-column>
                <el-table-column prop="channelName" label="类型" width="100"></el-table-column>
                <el-table-column label="公告标题" prop="title"></el-table-column>
                <el-table-column label="地区"  width="150">
                  <template v-slot="{row}">
                    {{row.provinceName + '-'+ row.cityName}}
                  </template>
                </el-table-column>
                <el-table-column prop="createDate" label="时间" width="150"></el-table-column>
            </el-table>
            <el-row class="mt-2" type="flex" align="center" justify="center">
                <el-pagination
                    prev-text="上一页"
                    next-text="下一页"
                    @current-change="handleCurrentChange"
                    :current-page.sync="formData.pageNo"
                    :page-size="20"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-row>
        </el-main>

        <el-aside width="400px">
            <div class="imgs">
                <img class="img-item" src="" alt="">
                <img class="img-item" src="" alt="">
                <img class="img-item" src="" alt="">
                <img class="img-item" src="" alt="">
            </div>
            <boxCard title="推荐公告" :list="boxList" :more="false" />
        </el-aside>
      </el-container>
    </el-container>
    
  </div>
</template>

<script scoped>
// @ is an alias to /src
import searchMethods from './mixin/search'
import HomeHeader from "@/components/HomeHeader.vue";

// import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
import boxCard from "../projectCenter/components/card-box";
import tabBox from "../projectCenter/components/tab";
import { getArea, getRegionArea, getAticleType, searchDoc } from "@/api/api.js";
import searchHeader from "@/components/searchHeader.vue";
export default {
  name: "Search",
  data() {
    return {
      isActive: false,
      selectRegion: '',
      selectArea: '',
      total: 0,
      boxList: [],
      formData: {
        channelId: [],
        provinceId: "",
        cityId: "",
        isAll: "0",
        year: "",
        month: "",
        day: "",
        isTitle: "",
        q: "",
      },
      articleList: [
        {
          type: '项目信息',
          title: '阿卡多了解阿睡觉了卡记录；看到看；拉的',
          provinceName: '北京',
          cityName: '北京',
          updateDate: '2020-0809'
        },
        {
          type: '项目信息',
          title: '阿卡多了解阿睡觉了卡记录；看到看；拉的',
          provinceName: '北京',
          cityName: '北京',
          updateDate: '2020-0809'
        },
        {
          type: '项目信息',
          title: '阿卡多了解阿睡觉了卡记录；看到看；拉的',
          provinceName: '北京',
          cityName: '北京',
          updateDate: '2020-0809'
        },
        {
          type: '项目信息',
          title: '阿卡多了解阿睡觉了卡记录；看到看；拉的',
          provinceName: '北京',
          cityName: '北京',
          updateDate: '2020-0809'
        }
      ]
    };
  },
  mixins: [searchMethods],
  components: {
    searchHeader,
    boxCard,
    tabBox,
    HomeHeader
  },
  computed: {
    isAreaActive: {
      get() {
        return this.selectArea
      },
      set(val) {
        this.selectArea = val
      }
    }
  },
  mounted() {
    this.loadArticles()
  },
  methods: {
    searchArticle() {
      this.formData.pageNo = 1
      this.loadArticles()
    },
    async loadArticles() {
      console.log(this.formData)
      let {page} = await searchDoc({
        ...this.formData,
        channelId: this.formData.channelId.join(',')
      })
      .catch(err => {
        this.$message.error('接口500');

      })
      this.articleList = page.content
      // if(this.formData.pageNo == 1) {
      //   this.articleList = page.content
      // } else {
      //   this.articleList = this.articleList.concat(res.page.content)
      // }
      this.total = page.totalElements
      // console.log(res)
    },
    handleCurrentChange() {
      this.loadArticles()
    },
    handleSearch() {},
    handleCheckAllChange() {},
    handleCheckedCitiesChange() {},
  },
};
</script>
<style scoped lang="scss">
$base-color: #2f81b6;
.top {
  height: 16px;
  background: #cfcfcf;
  font-size: 14px;
}
.page-position {
  background: #0164a4;
  color: #fff;
  font-weight: 16px;
  height: 40px;
  line-height: 40px;
}
.bg-grey {
  background: #eeeeee;
}
.input-content {
  width: 569px;
  border: 1px solid $base-color;
  // height: 40px;
  // line-height: 40px;
  box-sizing: border-box;
  .el-button {
    background: $base-color;
    color: #fff;
    width: 116px;
  }
}
.serach-item {
  padding: 14px 0px;
  margin: 0 !important;
  // &:nth-child(1) {
  //   padding: 30px 0px;
  // }
  &:nth-child(odd) {
    // background: #EEEEEE;
    @extend .bg-grey;
  }
}

.region-first {
  margin: 0;
}
.region-line {
  margin: 0px 17px;
  color: $base-color;
  font-weight: 600;
}
.el-button {
  width: 124px;
  height: 36px;
  background: $base-color;
  color: #fff;
}
.el-collapse-item__wrap{
  padding: 20px;
}
.el-main{
  padding-top: 0px;
  padding-left: 0px;
}
.img-item{
    width: 400px;
    height: 94px;
    border: 1px solid #ff5566;
    box-sizing: border-box;
    margin-bottom: 10px;
}
</style>
